<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 顶部区域 -->
      <page-up>
        <template v-slot:before>
          <el-form label-width="80px">
            <el-form-item label="关键字">
              <el-input class="inputName" v-model.trim="inputName" placeholder="根据编号搜索"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template v-slot:after>
          <el-button size="small" @click="clearData">清除</el-button>
          <el-button type="primary" size="small" @click="searchRandomData">搜索</el-button>
        </template>
      </page-up>
      <!-- 提示文案 -->
      <el-alert
        :title="'数据一共 ' + total + ' 条'"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom:20px">
      </el-alert>
      <!-- 内容列表区域 -->
      <el-table
        :header-cell-style="tableHeaderStyle"
        :data="RandomsData"
        style="width: 100%">
        <!-- 编号 -->
        <el-table-column
          label="编号"
          prop="id"
          width="190">
        </el-table-column>
        <!-- 题型 -->
        <el-table-column
          label="题型"
          width="90"
          prop="questionType">
          <template slot-scope="{row}">
            {{row.questionType | matchQuestionType}}
          </template>
        </el-table-column>
        <!-- 题目编号 -->
        <el-table-column
          label="题目编号"
          width="190">
          <template slot-scope="{row}">
            <a href="javascript:;" @click="onOpen(row.questionIDs[0].id)" style="color: rgb(0, 153, 255);" v-for="item in row.questionIDs" :key="item.number">{{item.number}}</a>
          </template>
        </el-table-column>
        <!-- 录入时间 -->
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="150">
        </el-table-column>
        <!-- 答题时间 -->
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)">
        </el-table-column>
        <!-- 正确率 -->
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)">
        </el-table-column>
        <!-- 录入人 -->
        <el-table-column
          prop="userName"
          label="录入人">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          label="操作">
          <template slot-scope="{row}">
            <el-button type="danger" icon="el-icon-delete" circle plain @click="delRandoms(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align:right;"
        background
        :current-page="RandomsParams.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="RandomsParams.pagesize"
        layout="  prev, pager, next,sizes, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- 详情的弹层 -->
    <questions-random-preview :visible.sync="randomPreviewVisible" :id="id" v-if="id != -1" @close="id = -1"/>
  </div>
</template>

<script>
import PageUp from '@/components/PageUp'
import { questionType } from '@/api/hmmm/constants'
import { randoms as getRandomsData, removeRandoms as removeRandomsData } from '@/api/hmmm/questions'
import QuestionsRandomPreview from '../components/questions-random-preview.vue'
export default {
  components: {
    PageUp,
    QuestionsRandomPreview
  },
  data () {
    return {
      inputName: '',
      total: 0,
      RandomsData: [], // 组题列表数据
      RandomsParams: { // 请求组题列表所需要的参数
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      randomPreviewVisible: false, //
      id: -1,
      randomsId: 0

    }
  },
  created () {
    this.uploadRandomsData()
  },
  filters: {
    // 题型数据转换
    matchQuestionType (val) {
      // val 是一个字符串
      const value = questionType.find(item => {
        return item.value - 0 === (val - 0)
      })
      return value.label
    }
  },
  methods: {
    // 表头高亮
    tableHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;color:#606266'
      } else {
        return ''
      }
    },
    // 获取数据
    async uploadRandomsData () {
      const res = await getRandomsData(this.RandomsParams)
      // console.log(res.data)
      this.total = res.data.counts
      this.RandomsData = res.data.items
    },
    // 清除数据
    clearData () {
      this.inputName = ''
    },
    // 搜索数据
    searchRandomData () {
      // if (this.inputName === '') return
      this.RandomsParams.keyword = this.inputName
      this.uploadRandomsData()
    },
    // 点击详情
    onOpen (content) {
      this.randomPreviewVisible = true
      this.id = content
      // console.log(this.id)
    },
    // 删除
    delRandoms (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(id)
        await removeRandomsData({ id: id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.uploadRandomsData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // console.log(id)
      // this.randomsId = id
      // await removeRandomsData(this.randomsId)
      // this.$message.success('删除成功！')
      // this.uploadRandomsData()
    },
    handleSizeChange (val) {
      this.RandomsParams.pagesize = val
      this.uploadRandomsData()
    },
    handleCurrentChange (val) {
      this.RandomsParams.page = val
      this.uploadRandomsData()
    }
  }
}
</script>

<style scoped lang='less'>
  // card 的margin
  .box-card {
    margin: 20px;
    font-size: 14px;
  }
  // card内部padding :20px的
  .item {
    padding: 20px 0;
  }
  .inputName{
    width: 190px;
    height: 32px;
  }
  .el-pagination{
    margin-top: 20px;
  }
</style>
